import React from 'react';
import { Table, Button, Row, Popconfirm, message } from 'antd';
import authHelper from '@/utils/auth/helper';
import { Icon } from '../../../components';
import FieldModal from '../FieldModal';
import { deleteFieldSet } from '../../service';
import styles from './index.less';

const { checkCode } = authHelper;

const renderItem = (arr, field) => {
    if (arr && arr.length > 0) {
        return arr.map(item => item[field]).join('、');
    }
    return '';
};

const FieldTable = ({ type, dataSource, onRefresh }) => {
    const modalRef = React.useRef(null);

    const usedPositionList = React.useMemo(() => {
        const arr = [];
        dataSource.forEach(({ positionList = [] }) => {
            if (positionList.length > 0) {
                positionList.forEach(item => {
                    arr.push(item.positionCode);
                });
            }
        });
        return arr || [];
    }, [dataSource]);

    const handleAdd = React.useCallback(() => {
        modalRef.current.show();
    }, []);

    const handleDelete = React.useCallback(configId => {
        if (configId) {
            deleteFieldSet(configId).then(res => {
                const { code, msg } = res;
                if (code === 10000) {
                    message.success('操作成功');
                    onRefresh();
                } else {
                    message.error(msg);
                }
            });
        }
    }, []);

    const columns = [
        {
            title: '招聘职位',
            dataIndex: 'positionList',
            ellipsis: true,
            render: (text, record) => renderItem(record.positionList, 'positionName')
        },
        {
            title: '职位类别',
            dataIndex: 'positionCategoryList',
            ellipsis: true,
            render: (text, record) => renderItem(record.positionCategoryList, 'positionCategoryName')
        },
        {
            title: '职位关键词',
            dataIndex: 'skillList',
            ellipsis: true,
            render: text => text?.join('、') || text
        },
        {
            title: '职位亮点',
            dataIndex: 'positionPointList',
            ellipsis: true,
            render: text => text?.join('、') || text
        },
        {
            title: '操作',
            dataIndex: 'operation',
            width: 100,
            fixed: 'right',
            render: (text, record) =>
                checkCode('office:recruitment:setting:field:delete') && (
                    <Row type="flex">
                        <Popconfirm
                            title="确定删除该配置吗？"
                            okText="确定"
                            cancelText="取消"
                            onConfirm={() => handleDelete(record?.configId)}
                        >
                            <Icon title="删除" type="DeleteIcon" onClick={() => {}} />
                        </Popconfirm>
                    </Row>
                )
        }
    ];

    const getColumns = () => {
        const arr = [...columns];
        if (type === 'xmrc') {
            arr.splice(2, 2);
        } else if (type === 'bosszp') {
            arr.splice(3, 1);
        } else if (type === 'liepin') {
            arr.splice(2, 1);
        } else if (type === 'mmzp') {
            arr.splice(3, 1);
            arr[1].title = '行业';
            arr[2].title = '行业方向';
        } else if (type === 'linkedin') {
            // arr.splice(3, 1);
            arr[0].title = 'Job title';
            arr[1].title = 'Job function';
            arr[2].title = 'Target your job post';
            arr[3].title = 'Add to a project';
            arr[3].dataIndex = 'projectInfoList';
        }
        return arr;
    };

    return (
        <>
            <Table
                rowKey="configId"
                bordered={false}
                dataSource={dataSource}
                columns={getColumns()}
                rowClassName={styles.editableRow}
                pagination={false}
                scroll={{ x: 800 }}
            />
            {checkCode('office:recruitment:setting:field:create') && (
                <>
                    <Button type="dashed" icon="plus" block style={{ margin: '10px 0' }} onClick={handleAdd}>
                        添加配置
                    </Button>
                    <FieldModal
                        wrappedComponentRef={modalRef}
                        type={type}
                        onRefresh={onRefresh}
                        disabledPositionList={usedPositionList}
                    />
                </>
            )}
        </>
    );
};

FieldTable.defaultProps = {
    type: '',
    dataSource: [],
    onRefresh: () => {}
};

export default FieldTable;
